<template>
  <div
    id="main16"
    class="main"
  />
</template>

<script>
export default {
  mounted () {
    this.echartsFn()
  },
  methods: {
    echartsFn () {
      var chartDom = document.getElementById('main16')
      var myChart = this.$echarts.init(chartDom)
      var option

      const dataX = [
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道',
        'XX街道'
      ] // 名称
      const dataY = [
        20, 50, 15, 35, 50, 30, 40, 50, 60, 20, 50, 15, 35, 50, 30, 40, 50, 60
      ] // 数据
      let zoomShow = false
      if (dataY.length > 14) {
        zoomShow = true
      } else {
        zoomShow = false
      }
      option = {
        backgroundColor: '#0D2753',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '10%',
          right: '5%',
          left: '5%',
          bottom: '20%'
        },
        xAxis: [
          {
            type: 'category',
            data: dataX,
            axisLine: {
              lineStyle: {
                color: 'rgba(66, 192, 255, .3)'
              }
            },
            axisLabel: {
              interval: 0,
              margin: 10,
              color: '#05D5FF',
              textStyle: {
                fontSize: 11
              },
              rotate: '45'
            },
            axisTick: {
              // 刻度
              show: false
            }
          }
        ],
        yAxis: [
          {
            axisLabel: {
              padding: [3, 0, 0, 0],
              formatter: '{value}',
              color: 'rgba(95, 187, 235, 1)',
              textStyle: {
                fontSize: 11
              }
            },
            axisTick: {
              show: true
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(66, 192, 255, .3)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0)'
              }
            }
          }
        ],
        dataZoom: [
          // 滚动条
          {
            show: zoomShow,
            type: 'slider',
            realtime: true,
            startValue: 0,
            endValue: 14,
            xAxisIndex: [0],
            bottom: '10',
            left: '30',
            height: 10,
            borderColor: 'rgba(0,0,0,0)',
            textStyle: {
              color: '#05D5FF'
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: dataY,
            barWidth: '10',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(5, 213, 255, 1)' // 0% 处的颜色
                    },
                    {
                      offset: 0.98,
                      color: 'rgba(5, 213, 255, 0)' // 100% 处的颜色
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(5, 213, 255, 1)',
                shadowBlur: 4
              }
            },
            label: {
              normal: {
                show: true,
                lineHeight: 10,
                formatter: '{c}',
                position: 'top',
                textStyle: {
                  color: '#fff',
                  fontSize: 10
                }
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style>

</style>
